SendGridのDynamic Templatesを使用してメールを送信してみる

#SendGrid

#Twilio

森亮介

2020.04.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

メール送信SaaSであるSendGridには、動的に中身を変更するメールを送信する機能があります。

Webサービスであれば、パスワードのリセット、購入時の領収書、登録確認などの処理を行った後にユーザーにメールを自動で送信(トランザクションメール)することが多いと思います。主要なフレームワークと同じく、内容を動的に変更できるメールテンプレートを作成するDynamic Templatesというのを試したいと思います。

前提条件

SendGridアカウント作成(無料ライセンスで可能)
APIキーの作成(Documentはこちら)

が必要です。

やってみよう

Dynamic Templatesの作成

ダッシュボードにログインし、Dynamic Templatesのページに遷移します。 Create a Dynamic Templateをクリックしましょう。

任意の名前を入力して作成します。

Dynamic Templatesの編集

作成されると一覧画面に表示されるので、クリックします。

編集するにはAdd Versionをクリックしてバージョンを作成する必要があります。クリックするとデザインを選択する画面に遷移します。

SendGridが用意してくれているデザインを使用することもできますし、自身で作成したデザインをしようすることもできます。

今回は Blank Template を使用していきます。

デザイン選択後はエディターを選びます。

ドラッグアンドドロップでHTMLを編集できるDesign Editor
ビジュアルプレビュー付きのCode Editor

があります。

今回はDesign Editorでやっていきます。

エディター選択後、編集画面に遷移するので必要な情報を入力し、保存します。

Version Name: Dynamic Templateの名前
Subject: メールの件名
PreHeader: メールがプレビューされたときに件名の後に表示されるテキストのことです。プレヘッダーは、購読者がメールを閲覧する際に最初に目にする3つの項目のうちの1つです

メール本文の作成

Dynamic TemplateではHandlebars.js syntaxを使用することができますが、現在は以下のことがサポートされています。

Substitution: 代用、置き換え
Conditional statements: 条件分岐(if/else, unless)
Iterations: 繰り返し

詳細なドキュメントはこちらをご参照ください。

では、早速Design Editorを使用して本文の作成を行なっていきましょう。

Buildタブをクリックします。

モジュールをドラッグ&ドロップで左のスペースに置いていきます。

Text,Image、Text、Codeをおきました。

Textを追加していきます。

Textのスタイルも変更することができますね(フォント、サイズ、カラーなど)

Handlebars.js構文のSubstitutionを使用するには、

こんにちは、{{nickname}} さん!!

のように{{}} で囲ってあげる必要があります。

Imageも追加してみます

画像をドラッグ&ドロップするか、ファイルアップロードをすればOKです。

複数アップロードして選択することも可能です。

次はConditional statementsを使用したTextを作成してみます。

if文は

{{#if user.profile.male}}
  サンキュー Sir
{{else if user.profile.female}}
サンキュー Madame
{{else}}
サンキュー Customer
{{/if}}

と入力しました。

最後にIterationsを使用したHTMLコードを入力します。

Add Codeをクリックするとエディタが開かれます。

each文は

<ol>
{{#each user.orderHistory}}
    <li>You ordered: {{this.item}} on: {{this.date}}</li>
{{/each}}
</ol>

と入力しました。

プレビューする

作成した本文をプレビューすることが可能です。ページ上部のPreviewをクリックします。

このように入力した内容が、Desctop,Mobile,Plain Textで確認することができます。

テストデータを作成する

プレビューを見ると、Handlebars.js構文を使用したため、データが無いと何も表示されていません。

テストデータを作成してプレビューするしてみます。プレビュー画面の{}Show Test Dataをクリックするとエディターが立ち上がるので、そこに以下のように入力します。

{
    "nickname": "クラスメソッド",
    "user": {
      "profile": {"male":true},
      "orderHistory":[
         {
            "date":"2020/04/10",
            "item":"PS4本体"
         },
         {
            "date":"2020/04/10",
            "item":"FF7R"
         }
      ]
    }
}

Handlebars.jsで使うパラメータはJsonで指定する必要があります。

テストデータ作成後、プレビューでもHandlebars.js構文で指定した内容が表示されます。

テンプレートの作成が終わったので保存します。

メールを送信する

では作成したテンプレートを使って実際にメールを送信してみます。 SendGridでトランザクションメールを送信するにはEmail APIを使うのが一般的です。

今回はcurlを使ってAPIを実行します。

curl -X "POST" "https://api.sendgrid.com/v3/mail/send" \
     -H 'Authorization: Bearer <<YOUR_API_KEY>>' \
     -H 'Content-Type: application/json' \
     -d '{
   "from":{
      "email":"<<From Email Address>>"
   },
   "personalizations":[
      {
         "to":[
            {
               "email":"<<To Email Address>>"
            }
         ],
         "dynamic_template_data":{
            "nickname": "クラスメソッド",
            "user": {
              "profile": {"male":true},
              "orderHistory":[
                 {
                    "date":"2020/04/10",
                    "item":"PS4本体"
                 },
                 {
                    "date":"2020/04/10",
                    "item":"FF7R"
                 }
              ]
            }
        }
      }
   ],
   "template_id":"<<template_id>>"
}'

DYnamic Templateを使用してメールを送信するので、